<template>
<div class="searchChildRouterPage">
        <order-box :data="orderList" @change-data="changeSort"></order-box>
    <template v-if="!isChangeSort">
        <template v-if="list.esports.length">
            <esports-box :data="list.esports[0]"></esports-box>
        </template>

        <template v-if="list.web_game[0]">
            <web-game-box :data="list.web_game"></web-game-box>
        </template>

        <template v-if="list.media_bangumi.length">
            <media-bangumi-box 
                :data="list.media_bangumi" 
                :releContentNum="searchInfo?.pageinfo['media_bangumi'].numResults"
            ></media-bangumi-box>
        </template>

        <template v-if="list.media_ft.length">
            <media-bangumi-box  
                :data="list.media_ft"  
                :releContentNum="searchInfo?.pageinfo['media_ft'].numResults"
            ></media-bangumi-box>
        </template>

        <template v-if="list.bili_user[0]">
            <bili-user-box :data="list.bili_user[0]"></bili-user-box>
        </template>
      
        <video-list-box :data="list?.video"></video-list-box>

    </template>
    
    <async-video-list-box :data="videoList" v-if="isChangeSort"></async-video-list-box>
        
      
    <div class="paging" v-if="numPages">
        <pagin-tion :total="numPages" @changeIndex="changePage"></pagin-tion>
    </div>
        
</div> 
</template>

<script lang="ts" setup>
import { onBeforeMount,ref,reactive,defineAsyncComponent  } from 'vue'
import { orderBox,videoListBox,paginTion,biliUserBox,webGameBox,esportsBox,mediaBangumiBox,getDiffTypeData } from '../layout'
import { get } from '@/http/axios'
import { getQuery } from '../json'
import { orderCity,round,duration } from '@/JSON/searchOrder.js'
import { change_query } from '../type'
import { useRouter } from 'vue-router'
import { baseRouteGetStatus,changeNowRoute,detectionAll } from '@/router/changeUrl'
import { useStore } from 'vuex'
const AsyncVideoListBox= defineAsyncComponent(() =>
  import('../layout/videoListBox.vue')
)

interface Props{
    keyword:string
}
const props = defineProps<Props>()
const router = useRouter()
const store = useStore()
let searchInfo = ref()
let orderList = ref<Array<any>>([round,duration,orderCity])
let videoList = ref()
let isChangeSort = ref<boolean>(false)
const map = new Map()
let numPages = ref<number | null>()

onBeforeMount(() => {
    
    baseRouteGetStatus(router,map)
    const obj = changeNowRoute(router,map)
    if (detectionAll(map,'order','duration','tids','page')) {
        initData()
    } else againData(obj)
    
})

let list = reactive({
    video:[],
    bili_user:[],
    web_game:[],
    esports:[],     //体育赛事
    media_bangumi:[],    //动漫/电视剧
    media_ft:[]          //电影
})
function initData() {
    isChangeSort.value = false
    const query = getQuery('all',props.keyword)
    get('/x/web-interface/wbi/search/all/v2?'+ query)
    .then(res => {
        //console.log('all',res);
        searchInfo.value = res.data
        if (!numPages.value){
            numPages.value = res.data.numPages
        }
        return handleData(res.data.result)
    }).catch(res => {
        alert('搜索数据加载失败')
    })
}
function handleData(arr:Array<any>){
    arr.forEach(el => {
        if (list[el.result_type]) {
            list[el.result_type] = el.data
        }
    })   
    console.log('all',list);
}
//选择页数时
function changePage(val:number){
    if (val === 1) map.delete('page')
    else map.set('page',val)

    const obj = changeNowRoute(router,map)
    if (val === 1 && detectionAll(map,'order','duration','tids')) {
        return initData()
    }
    return againData(obj)
}
/**
 * 
 * @param title query中的key
 * @param label query中的value
 * 
 */
function changeSort(title:string,label:string){
    numPages.value = null
    map.set(title,label)
    map.delete('page')
    const obj = changeNowRoute(router,map)
    if (title === label && detectionAll(map,'order','duration','tids')) {
        return initData()
    }
    return againData(obj)
}
function againData(other:change_query) {
    isChangeSort.value = true
    getDiffTypeData('video',props.keyword,other).then(res => {
        console.log('allvideo',res);
        if (!numPages.value){
            numPages.value = res.data.numPages
        }
        videoList.value = res.data.result
    }).catch(res => {
        alert('video数据加载失败啦')
    })
}
</script>

<style lang="scss" scoped>
@import url(../../../assets/css/publicNodeStyle.scss);
.searchChildRouterPage{
    gap: 30px;
}
</style>